<template>
  <el-dialog
    title="订单详情"
    :visible.sync="visible"
    width="80%"
    :before-close="
      () => {
        $emit('close');
      }
    "
  >
    <div v-if="getRole() === 'root' && info">
      <div class="detail-card">
        <div class="title">订单信息</div>
        <div class="content">
          <div class="content-cell">
            <el-row>
              <el-col :span="6">订单号：{{ info.order_no }}</el-col>
              <el-col :span="6">用户：</el-col>
              <el-col :span="6">支付方式：{{ payType(info.pay_type) }}</el-col>
              <el-col :span="6">下单时间：{{ info.created_at }}</el-col>
            </el-row>
          </div>
          <div class="content-cell">
            <el-row>
              <el-col :span="6">供应商：</el-col>
              <el-col :span="6">实付总金额：{{ info.payment }}</el-col>
              <el-col :span="6">用户备注：{{ info.reamark || "--" }}</el-col>
              <el-col :span="6"
                >订单备注：{{ info.admin_remark || "--" }}</el-col
              >
            </el-row>
          </div>
        </div>
      </div>
      <div class="detail-card">
        <div class="title">商品信息</div>
        <div class="content">
          <div
            v-for="item in info.commodity"
            :key="item.id"
            class="content-cell"
          >
            <el-row>
              <el-col :span="8">货号：</el-col>
              <el-col :span="4">成本价：</el-col>
              <el-col :span="4">折扣价：￥{{ item.discount_price }}</el-col>
              <el-col :span="4">属性：{{ item.spec }}</el-col>
              <el-col :span="4">数量：×{{ item.number }}</el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="detail-card">
        <div class="title">收货人信息</div>
        <div class="content">
          <div class="content-cell">
            <el-row>
              <el-col :span="8">收货人姓名:{{ info.realname }}</el-col>
              <el-col :span="8">联系电话:{{ info.mobile }}</el-col>
              <el-col :span="8">
                <el-popover
                  placement="top-start"
                  title="收货地址"
                  width="200"
                  trigger="hover"
                  :content="info.city_str + '' + info.detail"
                >
                  <div slot="reference">
                    收货地址:{{ info.city_str + info.detail }}
                  </div>
                </el-popover>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="detail-card">
        <div class="title">物流信息</div>
        <div class="content">
          <div
            v-for="item in info.commodity"
            :key="item.id"
            class="content-cell"
          >
            <el-row>
              <el-col :span="8">货号：</el-col>
              <el-col :span="8">类型：</el-col>
              <el-col :span="8">单号：{{ item.logistics_number }}</el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="info">
      <div class="detail-card">
        <div class="title">订单信息</div>
        <div class="content">
          <div class="content-cell">
            <el-row>
              <el-col :span="6">订单号：{{ info.order.order_no }}</el-col>
              <el-col :span="6">用户：{{ info.user.nickname }}</el-col>
              <el-col :span="6"
                >支付方式：{{ payType(info.order.pay_type) }}</el-col
              >
              <el-col :span="6"
                >下单时间：{{
                  info.order.created_at.date.split(".")[0]
                }}</el-col
              >
            </el-row>
          </div>
          <div class="content-cell">
            <el-row>
              <el-col :span="6">供应商：</el-col>
              <el-col :span="6">实付总金额：{{ info.order.payment }}</el-col>
              <el-col :span="6">用户备注：{{ info.reamark || "--" }}</el-col>
              <el-col :span="6"
                >订单备注：{{ info.admin_remark || "--" }}</el-col
              >
            </el-row>
            <el-row>
              <el-col :span="6">积分花费：{{ info.order.points }}</el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="detail-card">
        <div class="title">服务信息</div>
        <div class="content">
          <div class="content-cell">
            <el-row>
              <el-col :span="8">货号：{{ info.commodity.item_no }}</el-col>
              <el-col :span="4">价格：￥{{ info.commodity.price }}</el-col>
              <el-col :span="4">属性：{{ info.commodity.spec }}</el-col>
              <el-col :span="4">数量：×{{ info.commodity.number }}</el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="detail-card">
        <div class="title">收货人信息</div>
        <div class="content">
          <div class="content-cell">
            <el-row>
              <el-col :span="8"
                >收货人城市:<el-cascader
                  expand-trigger="hover"
                  :options="cityList"
                  :value="[
                    info.address.province,
                    info.address.city,
                    info.address.prefecture
                  ]"
                  placeholder="未知"
                  @change=""
                  :props="{
                    value: 'v',
                    label: 'n',
                    children: 'c'
                  }"
                  disabled
                  size="mini"
                  style="width:200px;"
                >
                </el-cascader
              ></el-col>
            </el-row>
          </div>
          <div class="content-cell">
            <el-row>
              <el-col :span="8">收货人姓名:{{ info.address.realname }}</el-col>
              <el-col :span="8">联系电话:{{ info.address.mobile }}</el-col>
              <el-col :span="8">
                <div slot="reference">收货地址:{{ info.address.detail }}</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="detail-card">
        <div class="title">服务信息</div>
        <div class="content">
          <div class="content-cell">
            <el-row>
              <el-col :span="8">服务时间：{{ info.commodity.serve_at }}</el-col>
              <el-col :span="8"
                >师傅名：{{ info.commodity.logistics_id }}
              </el-col>
              <el-col :span="8"
                >手机号：{{ info.commodity.logistics_number }}</el-col
              >
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import city from "@/utils/citys.js";
import { getRole } from "@/utils/auth";
import { getAgentOrderDetail } from "@/api/agent-mng";
import { getOrderDetail } from "@/api/order-mng";
export default {
  props: ["visible", "orderInfo"],
  data() {
    return {
      getDetail: getRole() === "root" ? getOrderDetail : getAgentOrderDetail,
      info: null,
      cityList: city
    };
  },
  watch: {
    visible: function(val) {
      if (val) {
        this.getDetail(this.orderInfo).then(res => {
          if (res.code === 200) {
            this.info = res.data;
          }
        });
      }
    }
  },
  methods: {
    getRole() {
      return getRole();
    },
    payType(type) {
      let text;
      switch (type) {
        case 1:
          text = "支付宝";
          break;
        case 2:
          text = "微信支付";
          break;
        case 3:
          text = "余额支付";
          break;
      }
      return text;
    }
  },
  created() {}
};
</script>

<style lang="scss" scoped>
.detail-card {
  margin: 20px 0;
  .title {
    line-height: 20px;
    font-weight: bold;
  }
  .content {
    background-color: #efefef;
    border: 1px solid #dfdfdf;
    .content-cell {
      height: 50px;
      line-height: 50px;
      overflow: hidden;
    }
  }
}
</style>
